<template>
  <view style="margin-top: 30rpx;">
    <button @click="downloadNetworkImage">下载网络图片</button>
    <image :src="downloadedImageUrl" mode="widthFix" style="width: 100%; margin-top: 20rpx;" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      downloadedImageUrl: '',
      imageUrl: 'https://mku.edu.cn/images/20230101.jpg'
    };
  },
  methods: {
    downloadNetworkImage() {
      const downloadTask = uni.downloadFile({
        url: this.imageUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            this.downloadedImageUrl = res.tempFilePath;
            console.log('图片下载成功，临时路径：', res.tempFilePath);
          }
        },
        fail: (err) => {
          console.error('图片下载失败：', err);
        }
      });

      // 监听下载进度
      downloadTask.onProgressUpdate((progressRes) => {
        console.log(`下载进度：${progressRes.progress}%`);
        console.log(`已下载字节：${progressRes.totalBytesWritten}`);
        console.log(`总字节数：${progressRes.totalBytesExpectedToWrite}`);
      });
    }
  }
};
</script>